<script setup>
import ItemDesignerGroup from '../ItemDesignerGroup.vue'
import ItemRendererGroup from '../ItemRendererGroup.vue'

defineProps({
  control: Object,
  model: Object,
});
</script>

<template>
  <div class="title">{{control.props.label}}</div>
  <div class="sub-form-box">
    <div class="sub-form" v-if="model" cols="12">
      <div class="item" v-for="(item, index) in control.props.columns" :key="index">
        <div class="label">{{item.label}}</div>
        <ItemRendererGroup :controls="item.controls" :formModel="model"></ItemRendererGroup>
      </div>
    </div>
    <div class="sub-form" v-else>
      <div class="item" v-for="(item, index) in control.props.columns" :key="index">
        <ItemDesignerGroup :controls="item.controls">
          <template #action="{data}">
            <slot name="action" :data="data" />
          </template>
        </ItemDesignerGroup>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.sub-form-box{
  @apply border w-full;
  min-height: 200px;

  .epdf-form-draggable {
    min-height: 200px;
  }
}
</style>
